<extend name="Public:index" />
<block name="main-crumb">
    <li class="active">用户增加</li>
</block>
<block name="mycss">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/ztree/css/zTreeStyle/zTreeStyle.css" />
    <style type="text/css">
        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            height: 300px;
            overflow-y: scroll;
            overflow-x: auto;
        }
    </style>
</block>
<block name="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
                            <ul id="treeDemo" class="ztree" style="margin-top:0;"></ul>
                        </div>

                        <form id="add_form" name="add_form" action="{:U(\'member/add\')}" method="post" class="definewidth m20">
                            <table class="table table-bordered table-hover definewidth m10">
                                <tr>
                                    <td width="10%" class="tableleft">用户名：</td>
                                    <td>
                                        <input type="text" name="data[username]" id="username" onblur="addUserCheck('name')" />
                                        <b style="color:#CE0000;">*</b>
                                        <if condition="$message['name'] eq ''">
                                            <span id="namat">(3-30个字符，可用汉字，字母或数字)</span>
                                            <else />
                                            <span id="namat" class="cuo_icoa">({$message['name']})</span>
                                        </if>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableleft">密码：</td>
                                    <td>
                                        <input type="password" name="data[password]" id="password" onblur="addUserCheck('password')" />
                                        &nbsp;&nbsp;<b style="color:#CE0000;">*</b>&nbsp;&nbsp;
                                        <if condition="$message['pwd'] eq ''">
                                            <span id="pwd">(6-16个大小写字母或数字)</span>
                                            <else />
                                            <span id="pwd" class="cuo_icoa">({$message['pwd']})</span>
                                        </if>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableleft">确认密码：</td>
                                    <td>
                                        <input type="password" name="repassword" id="repassword" onblur="addUserCheck('repassword')" />
                                        &nbsp;&nbsp;<b style="color:#CE0000;">*</b>&nbsp;&nbsp;
                                        <if condition="$message['repwd'] eq ''">
                                            <span id="repwd">(请重复输入密码)</span>
                                            <else />
                                            <span id="repwd" class="cuo_icoa">({$message['repwd']})</span>
                                        </if>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="10%" class="tableleft">手机号</td>
                                    <td>
                                        <input type="text" name="data[phone]" id="phone" onblur="addUserCheck('phone')"
                                            value="{$datalist[phone]}" />
                                        <b style="color:#CE0000;">*</b>
                                        <if condition="$message['phone'] eq ''">
                                            <span id="msg_phone"></span>
                                            <else />
                                            <span id="msg_phone" class="cuo_icoa">({$message['msg_phone']})</span>
                                        </if>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="10%" class="tableleft">手机MAC地址</td>
                                    <td>
                                        <input type="text" name="data[mac]" id="mac" value="{$datalist[mac]}"
                                            autocomplete="off" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableleft">角色：</td>
                                    <td>
                                        <select id="rootid" name="data[roleid]">
                                            <option value="">请选择</option>
                                            <volist name="roleData" id="r">
                                                <option value="{$r[roleid]}">{$r[rolename]}</option>
                                            </volist>
                                        </select>
                                        &nbsp;&nbsp;<b style="color:#CE0000;">*</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableleft">所属部门：</td>
                                    <td>
                                        <input id="catname" type="text" readonly value="" onclick="showMenu();" />
                                        <input id="department_id" name="data[department_id]" type="hidden" value="" />
                                        &nbsp;<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a>
                                        &nbsp;&nbsp;<b style="color:#CE0000;">*</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <input type="hidden" name="tijiao" id="tijiao" />
                                        <input type="button" class="btn btn_primary" id="sub" name="sub" value="保存"
                                            onclick="addUser()" />&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input type="reset" class="btn btn-success" value="清空" />
                                    </td>
                                </tr>

                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="myscript">
    <script src="__PUBLIC__/assets/js/jquery.maskedinput.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/web/js/memberadd.js"></script>
    <script src="__PUBLIC__/web/js/common.js"></script>
    <script type="text/javascript" src="__PUBLIC__/ztree/jquery.ztree.core.js"></script>
    <script>
        $.mask.definitions['h'] = "[A-Fa-f0-9]";
        $(function () {
            $("#mac").mask("hh:hh:hh:hh:hh:hh");
        });
        var setting = {
            view: {
                selectedMulti: false,
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick
            }
        };

        var zNodes = { $department_list };

        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getSelectedNodes();
            $("#department_id").val(nodes[0].id);
            $("#catname").val(nodes[0].name);
            hideMenu();
        }

        function showMenu() {
            var catObj = $("#catname");
            var catOffset = $("#catname").position();
            $("#menuContent").css({ left: catOffset.left + "px", top: catOffset.top + catObj.outerHeight() + "px" }).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        }
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }

        $(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </script>
</block>